<!--地址-->
<template>
  <div>
    <MyAddressNavBar></MyAddressNavBar>
    <div class="myAddress" v-loading="loading">
      <van-tabs>
        <van-tab title="收货地址">
          <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
          />
        </van-tab>
      </van-tabs>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-address-edit
              :area-list="areaList"
              show-set-default
              @save="onSave"
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
            />
          </div>
        </div>
      </van-overlay>

      <!-- <ul class="title">
        <li
          v-for="(item,key) in title"
          :key="key"
          :class="key == index ? 'active' : '' "
          @click="changesjump($event,key)"
        >
          {{item.name}}
          <i v-show="item.num">({{item.num}})</i>
        </li>
      </ul>

      <div class="btn">
        <el-button @click="newAddress" size="mini">新增地址</el-button>
      </div>

      <el-dialog :title="titles" :visible.sync="centerDialogVisible" width="90%" center>
        <div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item :label="form.title" size="mini">
              <el-input v-model="form.name" placeholder="收件人姓名"></el-input>
            </el-form-item>

            <el-form-item label="所在地区：">
              <el-select
                @change="region1"
                v-model="form.region1.id"
                placeholder="请选择省份"
                size="mini"
              >
                <el-option
                  v-for="item in form.region1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>

              <el-select
                @change="region2"
                v-model="form.region2.id"
                placeholder="请选择城市"
                size="mini"
              >
                <el-option
                  v-for="item in form.region2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>

              <el-select
                @change="region3"
                v-model="form.region3.id"
                placeholder="请选择所在区"
                size="mini"
              >
                <el-option
                  v-for="item in form.region3"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="详细地址：">
              <el-input type="textarea" v-model="form.address" placeholder="详细地址"></el-input>
            </el-form-item>

            <el-form-item label="联系电话：" size="mini">
              <el-input v-model="form.tel" placeholder="手机号码/座机号"></el-input>
            </el-form-item>

            <el-form-item label="默认地址：" prop="is_default">
              <el-switch v-model="form.is_default"></el-switch>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="newAddressConfirmation" v-if="flag">确 定</el-button>
          <el-button type="warning" @click="editAddress" v-else>确 定</el-button>
        </span>
      </el-dialog>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column :label="peoples" prop="name">
          <template slot-scope="scope">
            <i
              class="el-icon-time"
              v-show="scope.row.is_default"
              title="默认地址"
              style="color:#b8defc"
            >默认</i>
            <span>{{scope.row.consignee}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="收货地址">
          <template slot-scope="scope">
            {{scope.row.province_name}}
            {{scope.row.city_name}}
            {{scope.row.district_name}}
            {{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row, scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>-->
    </div>
  </div>
</template>

<script>
import MyAddressNavBar from "./myaddress-component/MyAddressNavBar";
export default {
  data() {
    return {
      _pid: "",
      cityId: "",
      show: false,
      areaList,
      chosenAddressId: 0,
      lists: [],
      list: [
        // {
        //   id: "1",
        //   name: "张三",
        //   tel: "13000000000",
        //   address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
        // },
        // {
        //   id: "2",
        //   name: "李四",
        //   tel: "1310000000",
        //   address: "浙江省杭州市拱墅区莫干山路 50 号"
        // }
      ],
      //地址列表

      title: [
        {
          name: "收货地址",
          id: 0
        },
        {
          name: "发票地址",
          id: 1
        }
      ],
      type: 1, // 收货地址 和 发票地址的接口区分
      loading: false,
      AddressCombination: [], // 地址组合放进这个里面      后期把这个数组给后台就好
      centerDialogVisible: false,
      titles: "新增收货人地址",
      peoples: "收货人",

      index: 0 // 菜单栏切换的效果的 index
    };
  },
  components: {
    MyAddressNavBar
  },
  methods: {
    //保存新增地址
    async onSave(content) {
      this.show = false;
      console.log(content, content.areaCode);
      let user_id = this.$store.state.user_id;
      let consignee = content.name;
      let province_name = content.province;
      let city_name = content.city;
      let district_name = content.county;
      let address = content.addressDetail;
      let phone = content.tel;
      let type = this.type;
      let is_default = content.isDefault;
      let province_id = content.areaCode.slice(0, 2) + "0000";
      let city_id = "00" + content.areaCode.slice(2, 4) + "00";
      let district_id = "0000" + content.areaCode.slice(4, 6);
      console.log(province_id, city_id, district_id);
      let addAddress = await this.$http({
        method: "post",
        url: "home/index/saveaddress",
        data: {
          user_id, //用户ID
          consignee, //收货人
          province_id, //省份id
          province_name, //省份名称
          city_id, //城市id
          city_name, //城市名称
          district_id, //地区id
          district_name, //地区名称
          address, //详细地址
          phone, //联系电话
          type, //1：收货地址，2：发票地址
          is_default //默认地址 0：不默认，1：默认
        }
      });
    },
    onAdd() {
      console.log("新增地址");
      this.show = true;
    },
    // 新增地址的确认
    async newAddressConfirmation() {
      this.centerDialogVisible = false;
      let addAddress = await this.$http({
        method: "post",
        url: "home/index/saveaddress",
        data: {
          user_id, //用户ID
          consignee, //收货人
          province_id, //省份id
          province_name, //省份名称
          city_id, //城市id
          city_name, //城市名称
          district_id, //地区id
          district_name, //地区名称
          address, //详细地址
          phone, //联系电话
          type, //1：收货地址，2：发票地址
          is_default //默认地址 0：不默认，1：默认
        }
      });
      if (addAddress.data.State.Code == 200) {
        this.dialogFormVisible2 = false;
        this.$Notify.success("成功增加该地址...");
      }
      this.getReceivingAddressInfo();
    },
    // 编辑地址的确认
    async editAddress() {
      this.centerDialogVisible = false;
      // this.conversion = true
      // console.log(this.AddressCombination)
      let [
        id,
        user_id, //用户ID
        consignee, //收货人
        province_id, //省份id
        province_name, //省份名称
        city_id, //城市id
        city_name, //城市名称
        district_id, //地区id
        district_name, //地区名称
        address, //详细地址
        phone, //联系电话
        type, //1：收货地址，2：发票地址
        is_default //默认地址 0：不默认，1：默认
      ] = [
        this.id,
        this.$store.state.user_id,
        this.form.name,
        this.AddressCombination["province"].id,
        this.AddressCombination["province"].name,
        this.AddressCombination["city"].id,
        this.AddressCombination["city"].name,
        this.AddressCombination["area"].id,
        this.AddressCombination["area"].name,
        this.form.address,
        this.form.tel,
        this.type,
        null
      ];

      if (this.form.is_default) {
        is_default = "1";
      } else {
        is_default = "0";
      }
      let obj = {
        id,
        user_id, //用户ID
        consignee, //收货人
        province_id, //省份id
        province_name, //省份名称
        city_id, //城市id
        city_name, //城市名称
        district_id, //地区id
        district_name, //地区名称
        address, //详细地址
        phone, //联系电话
        type, //1：收货地址，2：发票地址
        is_default //默认地址 0：不默认，1：默认
      };
      // console.log(obj)
      let arr = Object.values(obj);
      if (arr.includes("")) {
        this.$Notify.error("请填写完整的地址信息");
        return;
      }

      let addAddress = await this.$http({
        method: "post",
        url: "home/index/editaddress",
        data: {
          id,
          user_id, //用户ID
          consignee, //收货人
          province_id, //省份id
          province_name, //省份名称
          city_id, //城市id
          city_name, //城市名称
          district_id, //地区id
          district_name, //地区名称
          address, //详细地址
          phone, //联系电话
          type, //1：收货地址，2：发票地址
          is_default //默认地址 0：不默认，1：默认
        }
      });
      if (addAddress.data.State.Code == 200) {
        this.dialogFormVisible2 = false;
        this.$Notify.success("成功修改该地址...");
      }
      this.getReceivingAddressInfo();
    },
    // 获取收货地址数据
    async getReceivingAddressInfo() {
      let user_id = this.$store.state.user_id;
       let type = this.type;
      if(user_id){

      }else{
        
      }
     
      let res = await this.$http({
        method: "post",
        url: "home/index/getaddresslist",
        data: {
          user_id,
          type
        }
      });
      if (res.data.State.Code == 200) {
        let tableData = res.data.data;

        let list = [];
        for (let key in tableData) {
          let lists = {};
          lists.isDefault = {};
          lists.address = `${tableData[key].province_name}${tableData[key].city_name}${tableData[key].district_name}  ${tableData[key].address}`;
          lists.name = tableData[key].consignee;
          lists.tel = tableData[key].phone;
          lists.id = tableData[key].id;
          lists.isDefault = tableData[key].is_default;
          console.log(lists);
          this.list.push(lists);
          console.log(this.list);
        }
        // console.log(res.data.data);
      }
    },

    changesjump(ev, key) {
      this.index = key;
      if (this.index == 0) {
        this.titles = "新增收货人地址";
        this.peoples = "收货人";
        this.form.title = "收货人：";
        this.type = 1;
        console.log("点击了收货地址");
      } else if (this.index == 1) {
        this.titles = "新增收票人地址";
        this.peoples = "收票人";
        this.form.title = "收票人：";
        this.type = 2;
        console.log("点击了发票地址");
      }
      this.getReceivingAddressInfo();
    },

    // 删除事件
    async handleDelete(index, row, id) {
      let user_id = this.$store.state.user_id;
      let res = await this.$http({
        method: "post",
        url: "home/index/deladdress",
        data: {
          user_id,
          id
        }
      });
      if (res.data.State.Code == 200) {
        // console.log(res)
        this.tableData.splice(index, 1);
        this.$Notify({ type: "success", message: "删除成功..." });
      }
    }
  },
  created() {},
  mounted() {
    this.getReceivingAddressInfo();
  }
};
</script>
<style lang='scss' scoped>
.myAddress {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 30px;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 20px;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .btn {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    margin-left: 15px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  border-radius: 20px;
  width: 90%;
  height: 60%;
  background-color: #fff;
}
</style>